// 修改框架的默认样式,为后续更新,尽量不修改源码

:root {
  // 需要同步修改 tabs.ts 下 TAB_CONFIG 配置
  --card-margin: 20px;
  --header-height: 50px;

  // --el-color-white: #f0f0f0 !important;
  --el-color-black: #202121 !important;
  --el-component-custom-height: 32px !important;
  --el-menu-horizontal-height: var(--header-height) !important;
}

// 使用card组件内置的边距
.art-table-card {
  margin: 0 !important;
}

// 日期选择器的宽度 自适应
.el-date-editor {
  --el-date-editor-width: auto !important;
}

// 避免影响深色模式
html:not(.dark) {
  .el-menu {
    --el-menu-text-color: var(--el-color-black) !important;
  }

  .layout-top-bar {
    .menu {
      background-color: var(--main-color);

      .btn i,
      .breadcrumb-separator,
      .breadcrumb ul li span,
      .search-wrap,
      .search-wrap .left span,
      .el-menu-item,
      .el-sub-menu__title,
      // 混合菜单
      .scroll-bar {
        color: var(--el-color-white) !important;
      }

      .scroll-bar {
        .item.active {
          // 混合选中的颜色, 没有设计,先用白色
          color: var(--el-color-white) !important;
        }
      }
    }
  }
}

.dark {
  .el-menu {
    --el-menu-text-color: var(--el-color-white) !important;
  }
}

// 头部
.layout-top-bar {
  // 侧边菜单 头部logo样式
  .broadside-header {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    overflow: hidden;
    line-height: var(--header-height);
    cursor: pointer;

    .logo {
      margin-left: 28px;
    }

    p {
      font-weight: bold;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 64px;
      box-sizing: border-box;
      margin-left: 10px;
      // font-size: 16px;
      // color: #000;
    }
  }

  .menu {
    height: var(--header-height) !important;
    .btn-box {
      height: var(--header-height) !important;
    }
    .user {
      height: var(--header-height) !important;
    }
  }

  .worktab {
    $space: 8px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
    height: calc(34px + $space);
    // 兼容谷歌风格
    &.tab-google {
      align-items: flex-end;
      padding-top: $space / 2 !important;
    }
  }
}

// 菜单
.layout-sidebar {
  // 添加侧边导航
  &.broadside-menu {
    height: calc(100vh - var(--header-height)) !important;
    top: unset !important;
    bottom: 0;
    .menu-left {
      height: calc(100vh - var(--header-height)) !important;
    }
  }

  .el-menu {
    .el-menu--inline {
      background-color: var(--el-color-primary-light-9);
    }

    .el-sub-menu {
      &.is-active .el-sub-menu__title {
        color: var(--main-color);
      }

      .el-menu-item {
        &.is-active {
          background-color: var(--el-color-primary);
          color: var(--el-color-white) !important;
          span {
            color: var(--el-color-white) !important;
          }
        }

        &:not(.is-active):hover {
          background-color: var(--el-color-primary-light-7) !important;
        }
      }
    }

    // 菜单风格-深色 改造
    &.el-menu-dark {
      .el-sub-menu__title:hover,
      .el-menu-item:not(.is-active):hover {
        background-color: var(--el-color-primary-light-7) !important;
      }
    }
  }
}

// 抽屉
.el-drawer {
  --el-drawer-padding-primary: 15px !important;
  .el-drawer__header {
    border-bottom: 1px solid var(--art-card-border);
    margin-bottom: 0 !important;
    padding-bottom: var(--el-drawer-padding-primary) !important;
  }

  .el-drawer__footer {
    border-top: 1px solid var(--art-card-border);
    padding-top: var(--el-drawer-padding-primary) !important;
  }
}
